<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>echarts-3d-demo</title>
    <!-- <script src="js/jq.js"></script> -->
    <!-- <script src="js/echarts.js"></script> -->
    <!-- <script src="js/echarts-gl.js"></script> -->
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.4/jquery.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.4.2/echarts.min.js"></script>
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts-gl/2.0.8/echarts-gl.min.js"></script>

</head>

<body>
    <div id="main" style="width: 700px;height:500px;background-color: aqua;"></div>
    <script type="text/javascript">
        var mapJson = 'map/json/changping.json'
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('main'));

        $.get(mapJson, function (geoJson) {

            echarts.registerMap('centerMap', geoJson);
            myChart.setOption({
                backgroundColor: "#FFF",
                tooltip: {
                    show: true, // 提示框
                    trigger: "item",
                    formatter: function (params) {
                        return params.name;
                    },
                },
                geo3D: {
                    show: true,
                    map: "centerMap",
                    left: "0%",
                    roam: true,
                    zoom: 2,
                    regionHeight: 10,
                    boxHeight: 500,
                    label: {
                        show: true,
                        distance: 0,
                        color: "rgba(255,255,255,1)", // 地图初始化区域字体颜色
                        fontSize: 12,
                        opacity: 1,
                        backgroundColor: "rgba(255,255,255,0)",
                        shadowColor: "#043157", // 地图模糊颜色
                        shadowBlur: "3",
                        // position: "inside",
                        // padding: [6, 8],
                        borderRadius: 0,
                        distanca: 0,
                    },
                    itemStyle: {
                        // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                        color: "#0a599f", // 地图板块的颜色
                        opacity: 1, // 图形的不透明度 [ default: 1 ]
                        borderWidth: 1, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                        borderColor: "#FFFFFF", // 图形描边的颜色。[ default: #333 ]
                    },
                    emphasis: {
                        label: {
                            show: true,
                            color: "#000",
                            fontSize: 16,
                        },
                        itemStyle: {
                            color: "#ff0",
                            opacity: 1,
                        },
                    },
                    // shading: "color",
                    light: {
                        // 光照阴影
                        main: {
                            color: "#FFFFFF", // 光照颜色
                            intensity: 2, // 光照强度
                            shadowQuality: "light", // 阴影亮度
                            shadow: true, // 是否显示阴影
                            alpha: 50,
                            beta: 10,
                        },
                        // },
                        // ambient: {
                        //   color: "#ff0",
                        //   intensity: 0.1,
                        // },
                    },
                    regions: [],
                    viewControl: {
                        projection: "perspective",
                        autoRotate: false,
                        autoRotateAfterStill: 3,
                        distance: 120,
                        alpha: 30,
                        beta: 10,
                        // autoRotateSpeed: 27.777777,
                        minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                        maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                        minBeta: -1036800, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                        maxBeta: 1036800, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                        animation: true, // 是否开启动画。[ default: true ]
                        animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                        animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                    },
                },
                series: [
                    {
                        type: "map3D", // 加载series数据
                        map: "centerMap",
                        regionHeight: 0,
                        boxHeight: 500,
                        left: 0,
                        itemStyle: {
                            // 三维地理坐标系组件 中三维图形的视觉属性，包括颜色，透明度，描边等。
                            color: "rgba(4,63,115,0)", // 地图板块的颜色
                            opacity: 0, // 图形的不透明度 [ default: 1 ]
                            borderWidth: 0, // (地图板块间的分隔线)图形描边的宽度。加上描边后可以更清晰的区分每个区域   [ default: 0 ]
                            borderColor: "#FFFFFF", // 图形描边的颜色。[ default: #333 ]
                        },
                        label: {
                            show: true,
                            color: "#ffffff",
                            fontSize: 12,
                        },
                        regions: [],
                        zlevel: 5,
                        viewControl: {
                            projection: "perspective",
                            autoRotate: false,
                            autoRotateAfterStill: 3,
                            distance: 120,
                            alpha: 30,
                            beta: 10,
                            // autoRotateSpeed: 27.777777,
                            minAlpha: 5, // 上下旋转的最小 alpha 值。即视角能旋转到达最上面的角度。[ default: 5 ]
                            maxAlpha: 90, // 上下旋转的最大 alpha 值。即视角能旋转到达最下面的角度。[ default: 90 ]
                            minBeta: -1036800, // 左右旋转的最小 beta 值。即视角能旋转到达最左的角度。[ default: -80 ]
                            maxBeta: 1036800, // 左右旋转的最大 beta 值。即视角能旋转到达最右的角度。[ default: 80 ]
                            animation: true, // 是否开启动画。[ default: true ]
                            animationDurationUpdate: 1000, // 过渡动画的时长。[ default: 1000 ]
                            animationEasingUpdate: "cubicInOut", // 过渡动画的缓动效果。[ default: cubicInOut ]
                        },
                    },
                ],
            });
        })
        // 使用刚指定的配置项和数据显示图表。

    </script>

</body>

</html>